<template>
  <div class="stories">
    <div class="container">
      <h2 class="section-title">岛屿居民说</h2>

      <!-- 故事轮播 -->
      <div class="story-carousel">
        <div class="carousel-wrapper" ref="carouselRef">
          <div
            class="story-card"
            v-for="(story, index) in stories"
            :key="index"
            :class="{ active: currentIndex === index }"
          >
            <div class="story-content">
              <div class="quote-icon">"</div>
              <p>{{ story.content }}</p>
              <div class="user-info">
                <img
                  :src="story.avatar"
                  :alt="story.name + '的头像'"
                  class="user-avatar"
                  loading="lazy"
                />
                <div class="user-detail">
                  <h4>{{ story.name }}</h4>
                  <span>{{ story.info }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 指示器 -->
        <div class="carousel-indicators">
          <span
            v-for="(story, index) in stories"
            :key="index"
            class="indicator"
            :class="{ active: currentIndex === index }"
            @click="goToStory(index)"
          ></span>
        </div>
      </div>

      <!-- 更多用户评价 -->
      <div class="more-stories">
        <h3>更多居民心声</h3>
        <div class="story-grid">
          <div
            class="mini-story-card"
            v-for="(miniStory, index) in miniStories"
            :key="index"
          >
            <p>{{ miniStory.content }}</p>
            <div class="mini-user-info">
              <img
                :src="miniStory.avatar"
                :alt="miniStory.name"
                class="mini-avatar"
                loading="lazy"
              />
              <span class="mini-user-name">{{ miniStory.name }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";

// 生成随机头像的函数
const generateAvatar = (name, style = 'lorelei') => {
  return `https://api.dicebear.com/9.x/${style}/svg?seed=${encodeURIComponent(name)}&backgroundColor=transparent`;
};

// 故事数据
const stories = [
  {
    id: 1,
    content:
      "第一次夜跑不敢去江堤，匹配到两个女生，我们拉了个群，只说一句『起跑』就闭嘴跑完，结束后一起发了打卡截图，那一刻觉得城市没那么可怕了。",
    name: "小雨",
    info: "24岁 · 新媒体运营",
    avatar: generateAvatar("小雨"),
  },
  {
    id: 2,
    content:
      "我想拍胶片，但身边没人玩胶卷。在小岛屿找到同好，对方把相机借我试机，我第一次听到快门声差点哭，原来爱好也能被接住。",
    name: "阿木",
    info: "26岁 · 平面设计师",
    avatar: generateAvatar("阿木"),
  },
  {
    id: 3,
    content:
      "失恋那周，报名了读书会的线下讨论。大家并不知道我发生了什么，却只围绕书里的『自我救赎』聊了三小时。我走的时候把口罩扔进垃圾桶，感觉把坏情绪也丢了。",
    name: "小鹿",
    info: "28岁 · 心理咨询师",
    avatar: generateAvatar("小鹿"),
  },
  {
    id: 4,
    content:
      "刚毕业时一个人在上海租房，晚上总是害怕。在『夜猫搭子』里遇到一个同样失眠的女生，我们开着语音各自做自己的事，她画画我写代码，偶尔聊几句。那种『不孤单』的感觉，比任何安眠药都管用。",
    name: "小夏",
    info: "23岁 · 前端开发",
    avatar: generateAvatar("小夏"),
  },
  {
    id: 5,
    content:
      "工作压力大到脱发，在『护发搭子』里找到一群同样困扰的姐妹。我们每周分享防脱心得，一起买洗发水，还约着去理发店做护理。现在头发长回来了，更重要的是，我学会了如何温柔地对待自己。",
    name: "小秋",
    info: "26岁 · 产品经理",
    avatar: generateAvatar("小秋"),
  },
  {
    id: 6,
    content:
      "一个人搬家时，在『搬家搭子』里找到两个男生帮忙。他们不仅帮我搬东西，还帮我组装家具，最后一起吃了顿火锅。那一刻突然觉得，原来陌生人也可以这么温暖，城市也没有想象中那么冷漠。",
    name: "小冬",
    info: "25岁 · 市场专员",
    avatar: generateAvatar("小冬"),
  },
  {
    id: 7,
    content:
      "疫情期间在家办公，整个人都快抑郁了。在『居家办公搭子』里找到几个同样在家工作的人，我们开着视频一起工作，偶尔聊聊天，分享午餐。那种『有人陪伴』的感觉，让我重新找到了工作的乐趣。",
    name: "小春",
    info: "29岁 · 设计师",
    avatar: generateAvatar("小春"),
  },
];

// 更多简短评价
const miniStories = [
  {
    content:
      "考研二战那年，在『背书搭子』里匹配到一个男生，我们开着语音不说话，只把麦放在书页旁，背到2点互道一句『明天还一起吧』。后来双双上岸，却再没联系——可我知道，那段最黑的隧道是两个人打着手电筒走过的。",
    name: "阿晨",
    avatar: generateAvatar("阿晨", "adventurer"),
  },
  {
    content:
      "一个人在大城市做手术后，医生让多走路。在小岛屿发了『找慢走搭子』，结果来了4个女生，我们每天中午绕园区3圈，聊剧、聊猫、聊房贷，第10天我拆线，她们给我买了小蛋糕。原来『术后康复』也能被陪伴治愈。",
    name: "小七",
    avatar: generateAvatar("小七", "avataaars"),
  },
  {
    content:
      "我妈一直催相亲，我赌气说「今年过年不回家了」。在小岛屿找到5个同样『恐催婚』的人，我们组了『反催婚联盟』，除夕夜在民宿包饺子、写春联、看春晚弹幕。零点那一刻，我们像小时候一样给彼此压岁钱——红包里塞的是『做自己』四个字。",
    name: "橘子",
    avatar: generateAvatar("橘子", "personas"),
  },
  {
    content:
      "辞职gap第3个月，存款见底，整个人陷入『我是不是不行』的自我攻击。匹配到一位『晨间日记搭子』，每天7:30互发3件感恩小事。第21天，我写『感谢自己敢停下来』，她回『感谢你敢停下来让我看见勇气』。那一秒，焦虑突然松手。",
    name: "木子",
    avatar: generateAvatar("木子", "open-peeps"),
  },
  {
    content:
      "深夜1点，被甲方逼到在客厅无声大哭，打开小岛屿『情绪急救』，随机跳进一个3人语音房。没人问「你怎么了」，只是轮流讲今天吃到最好吃的东西：烤冷面、糖炒栗子、刚出锅的米饭锅巴……15分钟后，我哭着笑出声，去厨房煮了一碗泡面，加了两颗蛋。",
    name: "小北",
    avatar: generateAvatar("小北", "croodles"),
  },
  {
    content:
      "30岁第一次穿Lolita，不敢出门，在『穿搭搭子』找到同好妹子。她陪我一起戴头饰、走地铁、逛书店，全程有人帮忙提裙摆。那天被街拍时，她大声说「我的公主今天超棒！」——我突然懂了，所谓的「少女感」不是年龄，是有人允许你发光。",
    name: "桃子",
    avatar: generateAvatar("桃子", "micah"),
  },
  {
    content:
      "老公被外派6个月，晚上回家面对空荡客厅容易胡思乱想。加入『拼图搭子』，每周六去线下咖啡馆拼1000片拼图。我们不加微信，只聊拼图技巧，3小时后各自回家。第8周，图完成了，我发现自己也能享受「一个人的婚姻间隙」，不再把孤独错认成寂寞。",
    name: "阿静",
    avatar: generateAvatar("阿静", "miniavs"),
  },
  {
    content:
      "产后抑郁，身材焦虑到不敢照镜子。在『产后瑜伽搭子』遇到6位妈妈，我们把婴儿车围成圈，一边做猫式一边交流「今天有没有漏尿」。结课那天，大家把纸尿裤扔进垃圾桶，合拍了一张「妈妈也是宝宝」的照片——我第一次允许自己素颜笑到镜头里。",
    name: "小糖",
    avatar: generateAvatar("小糖", "notionists"),
  },
  {
    content:
      "一个人去看演唱会，周围都是情侣。在『live搭子』找到同样独自到场的男生，我们约好散场后一起坐地铁，共享充电宝、分一只耳机回味encore。列车驶出地面那一刻，远处霓虹像海水，我们像两座临时岛屿，亮了灯，又各自暗下去——足够温暖就好，不必一直相连。",
    name: "阿星",
    avatar: generateAvatar("阿星", "bottts"),
  },
  {
    content:
      "父亲突然离世，我回老家处理遗物，晚上在空屋失眠。打开小岛屿「夜猫搭子」，随机匹配到一位陌生人，我们开语音不说话，只一起播放《深夜电台》白噪音。凌晨4点，他轻轻说「天快亮了」，我回「嗯」。那一声回应，像替我守了灵，也让我相信：世界还在，我也还在。",
    name: "小夜",
    avatar: generateAvatar("小夜", "dylan"),
  },
];

// 状态
const currentIndex = ref(0);
const carouselRef = ref(null);
let autoplayInterval = null;

// 轮播方法
const nextStory = () => {
  currentIndex.value = (currentIndex.value + 1) % stories.length;
  updateCarouselPosition();
};

const goToStory = (index) => {
  currentIndex.value = index;
  updateCarouselPosition();
};

const updateCarouselPosition = () => {
  if (carouselRef.value) {
    const cardWidth = carouselRef.value.offsetWidth;
    carouselRef.value.style.transform = `translateX(-${
      currentIndex.value * cardWidth
    }px)`;
  }
};

// 自动播放
const startAutoplay = () => {
  autoplayInterval = setInterval(() => {
    nextStory();
  }, 5000);
};

const stopAutoplay = () => {
  if (autoplayInterval) {
    clearInterval(autoplayInterval);
  }
};

onMounted(() => {
  // 初始化轮播位置
  updateCarouselPosition();

  // 开始自动播放
  startAutoplay();

  // 监听窗口大小变化，更新轮播位置
  window.addEventListener("resize", updateCarouselPosition);
});

onUnmounted(() => {
  // 停止自动播放
  stopAutoplay();

  // 移除事件监听
  window.removeEventListener("resize", updateCarouselPosition);
});
</script>

<style scoped>
/* 用户故事页面基本样式 */
.stories {
  margin-top: var(--spacing-3xl);
  touch-action: pan-y;
  background: var(--background-color);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.section-title {
  font-size: var(--font-3xl);   
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xxl);
  position: relative;
  text-align: center;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
}

.section-title::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(
    135deg,
    var(--primary-color) 0%,
    var(--secondary-color) 100%
  );
  border-radius: 2px;
}

/* 故事轮播 */
.story-carousel {
  position: relative;
  margin-bottom: var(--spacing-xxl);
  background: var(--text-light);
  border-radius: 16px;
  box-shadow: var(--shadow-light);
  overflow: hidden;
}

.carousel-wrapper {
  display: flex;
  transition: transform 0.5s ease-in-out;
  height: 100%;
}

.story-card {
  min-width: 100%;
  padding: var(--spacing-xxl);
  display: flex;
  align-items: center;
  justify-content: center;
}

.story-card .story-content {
  max-width: 800px;
  text-align: center;
  position: relative;
}

.quote-icon {
  position: absolute;
  top: -40px;
  left: 0;
  font-size: 8rem;
  font-weight: 700;
  color: rgba(66, 184, 131, 0.1);
  line-height: 1;
}

.story-card .story-content p {
  font-size: var(--font-xl);
  color: var(--text-primary);
  line-height: 1.8;
  margin-bottom: var(--spacing-xl);
  padding: 0 var(--spacing-xl);
  position: relative;
  z-index: 1;
}

.user-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
}

.user-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--primary-color);
}

.user-detail {
  text-align: left;
}

.user-detail h4 {
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
}

.user-detail span {
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

/* 指示器 */
.carousel-indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--spacing-sm);
}

.indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
}

.indicator.active,
.indicator:hover {
  background: var(--primary-color);
  width: 30px;
  border-radius: 5px;
}

/* 更多用户评价 */
.more-stories {
  margin-top: var(--spacing-xxl);
}

.more-stories h3 {
  font-size: var(--font-2xl);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xl);
  text-align: center;
}

.story-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-lg);
}

.mini-story-card {
  background: var(--text-light);
  padding: var(--spacing-lg);
  border-radius: 12px;
  box-shadow: var(--shadow-light);
  transition: all 0.3s ease;
  position: relative;
}

.mini-story-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-medium);
}

.mini-story-card p {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--spacing-md);
  padding-left: var(--spacing-md);
  position: relative;
  text-align: left;
}

.mini-story-card p::before {
  content: '"';
  position: absolute;
  left: 0;
  top: -5px;
  font-size: 2rem;
  color: rgba(66, 184, 131, 0.2);
  font-weight: bold;
}

.mini-user-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}

.mini-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}

.mini-user-name {
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--text-primary);
}

/* 响应式设计 - 平板端 */
@media (max-width: 1024px) {
  .section-title {
    font-size: var(--font-2xl);
  }

  .story-grid {
    grid-template-columns: 1fr;
  }

  .story-card .story-content p {
    font-size: var(--font-lg);
  }
}

/* 响应式设计 - 移动端 */
@media (max-width: 768px) {
  .stories {
    padding: var(--spacing-xl) 0;
  }

  .section-title {
    font-size: var(--font-xl);
    margin-bottom: var(--spacing-xl);
  }

  .section-title::after {
    width: 50px;
    height: 3px;
  }

  .story-carousel {
    margin-bottom: var(--spacing-xl);
    border-radius: 12px;
  }

  .story-card {
    padding: var(--spacing-lg);
  }

  .quote-icon {
    font-size: 5rem;
    top: -20px;
  }

  .story-card .story-content p {
    font-size: var(--font-base);
    padding: 0;
    margin-bottom: var(--spacing-lg);
  }

  .user-avatar {
    width: 45px;
    height: 45px;
  }

  .user-detail h4 {
    font-size: var(--font-base);
  }

  .carousel-indicators {
    bottom: 15px;
  }

  .more-stories {
    margin-top: var(--spacing-xl);
  }

  .more-stories h3 {
    font-size: var(--font-xl);
    margin-bottom: var(--spacing-lg);
  }

  .story-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .mini-story-card {
    padding: var(--spacing-md);
    border-radius: 10px;
  }

  .mini-story-card p {
    font-size: var(--font-xs);
    line-height: 1.5;
  }
}

/* 移动端触摸优化 */
@media (max-width: 768px) {
  .mini-story-card,
  .indicator {
    touch-action: manipulation;
  }

  .mini-story-card:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }

  /* 优化滚动性能 */
  .stories {
    will-change: transform;
  }

  /* 移动端字体优化 */
  .section-title,
  .story-card .story-content p,
  .more-stories h3 {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}
</style>
